<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/goods' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>编辑海报</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="form" :model="attr" label-width="80px">
	
			<el-form-item label="商品ID">
		    	<el-input v-model="good_id"></el-input>
		  	</el-form-item>
		  	
		  	<el-form-item label="选择类目">
			    <el-select v-model="cate_id" placeholder="请选择">
			      	<el-option  v-for="(item,index) in screenList" :key="item.id" :label="item.screen_cate_name" :value="item.id"></el-option>
			    </el-select>
			</el-form-item>
		  	
			<el-form-item label="商品主图">
				<el-upload
				  class="upload-demo"
				  action="/api/goods/uploadImage"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :limit="1"
				  :file-list="poster"
				  :on-success="successEvent"
				  list-type="picture">
				  <el-button size="small" type="primary">点击上传</el-button>
				  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
		  	</el-form-item>

		  	<el-form-item>
		    	<el-button type="primary" @click="addAttr">修改海报</el-button>
		    	<el-button>取消</el-button>
		  	</el-form-item>
		</el-form>
		
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				token:"",
				dialogVisible:false,
				attr:{
					attr_name:"",
					status:true,
					cate_id:null
				},
				screenList:[],
				cateList:[],
				attrList:[],
				selectAttrList:[],
				poster:[],
				good_id:"",
				pic_url:"",
				cate_id:''
			}
		},
		created(){
			this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			this.getScreenList();
			this.getCateList();
			this.getPoster();
		},
		methods:{
			handleRemove(file, fileList) {
		        console.log(file, fileList);
		    },
		    handlePreview(file) {
		        console.log(file);
		   	},
		   	successEvent(file){
		    	this.pic_url = file.result;
		    },
		    handlePictureCardPreview(file) {
		        this.dialogImageUrl = file.url;
		        this.dialogVisible = true;
		    },
		    handleExceed(files, fileList) {
	        	this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	      	},
		    beforeRemove(file, fileList) {
		        return this.$confirm(`确定移除 ${ file.name }？`);
		    },
		    addAttr(){
		    	axios.post('/api/posters/edit',{_token:this.token,pic_url:this.pic_url,good_id:this.good_id,cate_id:this.cate_id,id:this.$route.params.id})
		    		.then(result => {
		    			if(result.data.code == 200){
		    				this.$notify({
		    					type:"success",
		    					title:"修改成功",
		    					message:result.data.message
		    				})
		    				this.$router.push({ path: '/screen/posters' });
		    				
		    			}else{
		    				this.$notify.error(result.data.message);
		    			}
		    		})
		    		.catch(error => {

		    		})
		    },
		    getScreenList()
		    {
		    	axios.get('/api/screens')
					.then(result => {
						console.log(result);
						if(result.data.code == 200){
							this.screenList = result.data.result;
						}
					})
					.catch(error => {

					})
		    },
		    getCateList()
		    {
		    	axios.get('/api/cates')
					.then(result => {
						console.log(result);
						if(result.data.code == 200){
							for(var i=0;i<result.data.result.length;i++){
								result.data.result[i]['isOpen'] = false; 
							}
							this.cateList = result.data.result;
						}
					})
					.catch(error => {

					})
		    },
		    selectCate(id){
		    	axios.get('/api/attrs?id='+id)
		    		.then(result => {
		    			if(result.data.code == 200){
		    				this.attrList = this.handleAttrData(result.data.result);
		    				this.dialogVisible = true;
		    			}
		    		})
		    		.catch(error => {

		    		})
		    },
		    handleAttrData(data){
				var temp = [];
				for(var i=0;i<data.length;i++){
					temp.push({label:data[i].attr_name, key:'{"attr_id":'+data[i].id+',"cate_id":'+data[i].cate_id+'}'});
				}
				return temp
			},
			filterMethod(query,item){
				return item;
			},
			handleClose(){
				this.dialogVisible = false;
			},
			getPoster()
			{
				axios.get('/api/posters/info/'+this.$route.params.id)
					.then(res => {
						if(res.data.code == 200){
							this.pic_url = res.data.result[0].pic_url_1
							this.good_id = res.data.result[0].good_id
							this.cate_id = res.data.result[0].cate_id
							this.poster.push({
								name:res.data.result[0].pic_url_1,
								url:res.data.result[0].pic_url
							});
						}
					})
			}
		}
	}
</script>

<style type="text/css">
	input[type=file] {
	    display: none;
	}
</style>